<template>
  <div>
    <Card>

      <Table :columns="tableOption" :data="data.list" border :no-data-text="initConfig.loadingText ? initConfig.loadingText : '暂无数据'"
        border ref="tables" editable search-place="top">
        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
            <Button type='primary' @click="edit(row, index)" size='small'>修改</Button>
            <Button type='error' @click="del(row, index)" size='small'>删除</Button>
          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='initConfig.page.current' :total="initConfig.page.total" :page-size="initConfig.page.pageSize"
         show-total show-elevator @on-change="changepage"></Page>
    </Card>
    <!-- 添加弹窗 -->
    <Modal v-model="initConfig.createModal" :title="initConfig.createTitle" width='1000'>
      <Form ref="form" :model="initConfig.form" :rules="ruleValidate" :label-width="80">
        <FormItem label="上级">
          <div>无</div>
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="initConfig.form.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="排序" prop="sorter">
          <Input v-model="initConfig.form.sorter" placeholder="请输入排序"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="save('form')" :disabled="initConfig.isDisable" :loading="initConfig.isLoading">保存</Button>
      </div>
    </Modal>
    <!-- 删除弹窗 -->
    <Modal v-model="initConfig.delModal" title="提示">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除数据？</p>
      <div slot="footer">
        <Button @click='initConfig.delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>

  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
import {
  mapState
} from 'vuex'
import {
  permission
} from '@/config/permission.js'
import {
  tableOption
} from '../../../data/article-group/article-collect.js'
  // 接口
import {
  getList
  // add,
  // put,
  // del
} from '@/api/article-group/article-collect.js'
import {
  initConfig
} from '@/config/global.js'
import Tables from '_c/tables'

export default {
  name: 'tables_page',
  components: {
    Tables
  },
  created () {
    let _this = this
    this.getList()
  },
  watch: {

  },
  mounted () {

  },
  computed: {
    ...mapState({
      roles: state => state.user.roles
    })
  },
  data () {
    return {
      initConfig: initConfig,
      tableOption: tableOption,

      data: {
        list: [{
          name: '测试数据',
          id: 1
        }]
      },
      ruleValidate: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
		  sorter: [{
		    required: true,
		     pattern: /^[0-9]+$/,
		    message: '请输入数字',
		    trigger: 'blur'
		  }]
      }
    }
  },
  methods: {
    // 列表数据
    getList () {
      let _this = this
      let params = {
        page: this.initConfig.page.current,
        size: this.initConfig.page.size
      }
      getList(params).then(res => {
        if (res.data.status == 1) {
          let result = res.data.data
          _this.data.list = result.list
          _this.initConfig.page.total = result.count
        } else {
          _this.$Message.error(res.data.message || res.data.msg)
        }
      }).catch(function (error) {
        // 异常
        console.log(error)
      })
    },
    save () {

    },
    // 重置
    reset () {
      this.initConfig.searchObj = {} // 清空搜索框
      this.getList()
    },
    // 查询
    search () {
      this.getList()
    },
    create () {
      this.initConfig.createModal = true
      this.initConfig.createTitle = '新增'
      this.initConfig.isAdd = true
      this.initConfig.form = {} // 表单重置
      this.handleReset('form') // 验证重置
    },
    edit (row) {
      let obj = JSON.parse(JSON.stringify(row)) // 行数据
      this.initConfig.createModal = true
      this.initConfig.createTitle = '编辑'
      this.initConfig.isAdd = false
      this.initConfig.form = {} // 表单重置
      // 赋值接口返回
      this.handleReset('form') // 验证重置
    },
    // 删除
    del (row) {
      this.initConfig.delId = row.id
      this.initConfig.delModal = true
      // 删除接口
    },
    confirmDel () {
      let _this = this
      let obj = {
        id: this.delId
      }
      del(obj).then(res => {
        if (res.data.status == 1) {
          _this.delModal = false
          _this.$Message.success('操作成功')
          _this.getList() // 重新刷新数据
        } else {
          _this.delModal = false
          // axios响应拦截
        }
      }).catch(function (error) {
        // 异常
        _this.delModal = false
        console.log(error)
      })
    },
    changepage (e) {
      this.initConfig.page.current = e,
      this.getList()
    },

    handleReset (name) {
      this.$refs[name].resetFields()
    }

  }

}
</script>

<style lang="scss">
  @import "./index";
</style>
